<template>
  <div id="quesion">
    <!-- 头部 -->
    <div class="header">
      <Headers></Headers>
    </div>
    <div class="concent">
      <div class="concent_img">
        <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/2/16750718575001675064354229%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC%20(2).jpg" alt="" style="width:100%">
      </div>
      <div style="width: 100%; margin: 0 auto;">
        <div style="width: 90%;margin: 0 auto;">
          <div class="concent_title" style="text-align: center;">
            企业简介
          </div>
          <div style="line-height: 2rem;">
            <div>
              渡石科技致力于为医药行业客户和药研机构提供高品质的供应链及数据服务，包括成品药、生物制品、化合物、检测样本、人源物质、动源物质和医疗器械等的存储、干支末运输、医疗机构门到门的专业末端配送等一系列服务,已为多家全球TOP100客户提供优质服务。<br />
              渡石具备深厚的自主研发能力，利用大数据、AI、物联网以及区块链等技术，自主研发出一套医药冷链智能履约系统，帮助承运方提升履约质量和效率，沉淀数据资产，利用数据服务上下游，打造医药领域专业履约平台。<br />
              渡石以客户至上，质量为先为服务方针，以GMP、GDP为指导，打造出一套完善的质量运营体系，并通过ISO9001质量体系认证。渡石团队具备多年行业经验，已在全国布局五大区域子公司，覆盖包括20多个省、自治区、直辖市等在内的322个市级单位，以及下沉城市，建立起系统、质量、产品等一体化的全场景供应链服务能力。<br />
            </div>
          </div>

        </div>
        <div>
          <div class="concent_title" style="text-align: center;">
            企业文化
          </div>
          <div >
            <div style="line-height: 2rem;background: #ececec; padding: 1.5rem 2rem 1.2rem 2rem;margin-bottom: 1rem;min-height: 10rem;">
              <div style="display:flex;vertical-align:middle;color:#ecac54;margin-bottom: 1rem;">
                <div class="iconfont icon-shiming" style="font-size: 3rem;padding: 0px 10px 0px 0px;"></div>
                <div style="font-weight: bold;">使命</div>
              </div>
              <div>
                通过平台的主动控制，实现医药供应链行业数字化升级,为生命科学保驾护航
              </div>
            </div>
            <div style="line-height: 2rem;background: #ececec; padding: 1.5rem 2rem 4rem 2rem;min-height: 10rem;">
              <div style="display:flex;vertical-align:middle;color:#ecac54;margin-bottom: 1rem;">
                <div class="iconfont icon-pinzhi" style="font-size: 2.5rem;padding: 0px 10px 0px 0px;"></div>
                <div style="font-weight: bold;">愿景</div>
              </div>
              <div>
                成为生命科学领域最受信赖的智慧供应链服务提供商
              </div>

            </div>
          </div>

        </div>
        <div>
          <div class="concent_title" style="text-align: center;">
            员工建设
          </div>
          <div class="swper" style="padding: 0rem 0rem 1rem 0rem;line-height: 3rem; ">
            <!-- <van-swipe :loop="true" :autoplay="3000" >
              <van-swipe-item v-for="(itme,index) in slides" :key="index">
               <img :src="itme.image" alt=""  style="width: 107%;">
              </van-swipe-item>

            </van-swipe> -->
           <Swper></Swper>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>
    <script>
import Headers from "../components/headers.vue"
import Footer from "../components/footer.vue"
import Swper from "../components/swper.vue"
import { ref } from "vue"
export default {
  name: "quesion",
  setup() {
    const slides = ref([])
    const currentSlide = ref(0)
    const autoplayTimer = ref("")
    const isZoomed = ref(false)
    const zoomedSlide = ref("")
    return {
      slides, currentSlide, autoplayTimer, isZoomed, zoomedSlide
    }
  },
  components: {
    Headers,
    Footer,
    Swper
  },
  methods: {
    startAutoplay() {
      this.autoplayTimer = setInterval(() => {
        this.nextSlide();
      }, 1000);
    },
    stopAutoplay() {
      clearInterval(this.autoplayTimer);
      this.autoplayTimer = null;
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.slides.length;
    },
    zoomSlide(index) {
      this.isZoomed = true;
      this.zoomedSlide = index;
      this.stopAutoplay();
    }
  },
  mounted() {
    this.slides = [{ image: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/1676512700091%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230215185136.jpg" },
    { image: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/1/1676512763432%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851361.jpg" },
    { image: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/2/1676512785536%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851362.jpg" },
    { image: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/3/1676512812667%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851363.jpg" },
    { image: "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/1676512837591%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202302151851364.jpg" }]
    this.startAutoplay();
  },
}
    </script>
    <style scoped>
.concent_title {
  margin: 2rem 0rem 2rem 0rem;
}
.footer{
  margin: 2rem 0rem 0rem 0rem;
  background: black;
  padding: 1rem 0rem 0.1rem 0rem;
}
</style>